<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;  
%>  
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="<%=basePath %>/css/style.css" rel="stylesheet" type="text/css"/>


<title>The Head of the System</title>
<style>
.select
{
	border-style: none;	
}



#statusBar
{
/*
		border-color: #ACD8FA;
		border-style: solid;
		border-width: 1px;
		border-top-left-radius:5px;
		border-top-right-radius:5px;
		border-bottom-left-radius:5px;
		border-bottom-right-radius:5px;
		height:70px;
		width: 430px;
		float: right;
		background-color: #E5ECF9;*/
		float: right;
		font-size: 12px;
		height:70px;
		width: 430px;
}

#settings
{
	float:left;
	margin-left: 643px;
	margin-top:35px;
	position: absolute;
	width: 135px;	
	border-color: #999;
	border-width: 1px;
	border-style: solid;
	padding: 5px;
	background-color: white;
	font-size: 12px;
	
}


.option
{
	cursor: pointer;
	height: 20px;
	padding-top: 5px;
	padding-left: 15px;
}
</style>


<script>


function login()
{
	
	$.ajax({
		  type:"GET",
		  url: "userAction!login.action?loginType="+$("#loginType").val()+"&nameOrEmail="+$("#nameOrEmail").val()+"&user.password="+$("#password").val(),		
		  success: function(mess)
		  {
		   	 if(mess.indexOf("r")>0)
		   		 alert("Login fail.You have enter an invalid account.");
		   	 else	   		  
		   	 	   window.location.href="<%=basePath%>${currentUrl}";
		  }
		});
}

function loginEvent()
{
	if(event.keyCode==13)login();
}

function logout()
{
	$.ajax({
		  type:"GET",
		  url: "userAction!logout.action",		
		  success: function(mess)
		  {
			  var url="${currentUrl}";
			  if(url.indexOf("userManage")>0)window.location.href="<%=basePath%>/login.jsp";
			  else				  
			 	 window.location.href="<%=basePath%>${currentUrl}";
		  }
	});
}

function displaySettings()
{
	$("#settings").attr("style","display:inline");
}

function hideSettings()
{
	$("#settings").attr("style","display:none");		
}

function addClass(div)
{
	$("#"+div).addClass("selected");
}

function removeClass(div)
{
	$("#"+div).removeClass("selected");
}




</script>
</head>
<body>
<!-- login/Register form at head start -->

<div  id="statusBar">
<c:choose>
<c:when test="${user_session==null }">
<form action="userAction!login.action" class='toRight' style="height:36px;" autocomplete="off">
<table>
<tr>
<td>
<div class="DivSelect">
<select name="loginType" class="SelectList" id="loginType">
<option value="byName">Name</option>
<option value="byEmail">Email</option>
</select>
</div>
</td>
<td><input name="nameOrEmail" type="text" id="nameOrEmail" onkeypress="loginEvent();" class="inputBlue"></td>
<td><a href="findPw.jsp">Find My Password</a></td>
</tr>
<tr>
<td style="padding-left:2px;">Password</td>
<td><input name="user.password" type="password" id="password" onkeypress="loginEvent();" class="inputBlue"></td>
<td>
<a href="javascript:login()">Login</a>&nbsp;|
<a href="<%=basePath %>/register.jsp">Register</a></td>
</tr>
</table>
</form>
</c:when>
<c:otherwise>
<div style="padding: 10px;">
<img src="<%=basePath %>/img/user_online.gif">
${user_session.name }&nbsp;|&nbsp;
<a href="#" onmouseover="displaySettings();" >Account Settings▼</a>&nbsp;|&nbsp;
<a href="javascript:logout()">Logout</a><hr>
post:${user_session.post }&nbsp;&nbsp;score:${user_session.score }
</div>
</c:otherwise>
</c:choose>
</div>
<!-- login/Register form at head end -->
<div id="settings" style="display:none;"onmouseout="hideSettings();" onmouseover="displaySettings();">
<div onmouseover="displaySettings();addClass('op1')" id="op1" onmouseout="removeClass('op1')" class="option" onclick="window.location.href='<%=basePath%>/userManage/editAvatar.jsp'">Edit avatar</div>
<div onmouseover="displaySettings();addClass('op2')" id="op2" onmouseout="removeClass('op2')" class="option">Personal data</div>
<div onmouseover="displaySettings();addClass('op3')" id="op3" onmouseout="removeClass('op3')" class="option">Edit Password</div>
</div>	

</body>
<script>
$("input:button").button();
</script>
</html>